<template>
  <div>
    <el-dialog :modal="false" style="margin-top: 10vh;" :close-on-click-modal="false" :title="title"
      :visible.sync="dialogVisible" width="230px" :before-close="handleClose">
      <div class="Boxfather">
        <!-- printTest是打印内容 -->
        <div id="printTest" ref="printTest" v-if="dialogVisible" class="prinCntent">
          <!-- codeItem是生成二维码 -->
          <div v-for="(item, index) in barcodeNum" :key="index + 'qr'" id="deleteDom" class="printFather">
            <span class="BoxnumTop">{{item.top}}</span>
            <div class="innerBox">
              <span class="Boxnum totate innerBoxNum" style="padding-bottom: 16px;">
                {{ item.left }}
              </span>
              <div :id="`print${index}`" ref="codeItem" class="codeItem"></div>
              <span class="Boxnum totate innerBoxNum" style="padding-top: 16px;">{{ item.right }}</span>
            </div>
            <span class="Boxnum">{{item.skuNo}}</span>
       
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose(0)">取 消</el-button>
        <el-button type="primary" @click="handleClose(1)" v-print="'#printTest'">打 印</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import Print from 'vue-print-nb';
import QRCode from 'qrcodejs2'
export default {
  name: 'RuoyiStcokWebIndex',
  directives: {
    Print
  },
  data() {
    return {
    };
  },




  props: {
   
    title: {
      type: String,
      default: '商品列表'
    },
    // 接受数组参数实例[{top:'二维码上边',left:'左边',right:'右边',bottom:'下边',id:'二维码生成内容'}]
    barcodeNum: {
      type: Array,
      default: () => []
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '55'
    },
    height: {
      type: String,
      default: '55'
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }

  },
  components: {

  },
  mounted() {

  },

  methods: {
    createQrcode() {
      let self = this
      if (self.dialogVisible)
        self.$nextTick(function () {
          console.log(` ==>`, self.barcodeNum);
          self.barcodeNum.map((item, index) => {
            new QRCode(`print${index}`, {
              text: item.id, //页面地址 ,如果页面需要参数传递请注意哈希模式#
              width: self.width, // 二维码宽度 （不支持100%）
              height: self.height, // 二维码高度 （不支持100%）
              colorDark: self.colorDark,
              colorLight: self.colorLight,
              correctLevel: QRCode.CorrectLevel.H,
            })





          })
        });

    },
    handleClose(val) {
      if (val == 1) {
        console.log('打印条形码');
      } else {
        this.$emit('handleClose',!this.dialogVisible);
      }

    }
  },
  watch: {
    dialogVisible(data) {
      if (data) {
        this.createQrcode()
      }
    }
  }
};
</script>

<style media="printTest" scoped>
::v-deep .el-dialog__body {
  padding: 10px 10px 20px 20px !important;
}

.innerBox {
  display: flex;
}

.innerBoxrotate {
  transform: rotate(90deg);
}

.Boxfather {
  display: flex;
  justify-content: center;
  height: 200px;
  overflow-y: scroll;
}


/* 每一个打印的内容 */
.printFather {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* width: 50px; */
  height: 59px;
  /* overflow: hidden; */
  margin-bottom: 7mm !important;
}

/* 二维码 */
.codeItem {
  /* width: 45px; */
  margin: 0 4px 4px 4px;
}

/* 二维码下边字体 */
.Boxnum {
  /* margin-top: 4px; */
  font-size: 12px;
}
.BoxnumTop{
  font-size: 12px;
  margin-bottom: 2px;
}

.totate {
  width: 55px;
  transform: rotate(90deg);
}

.innerBoxNum {
  display: flex;
  align-items: center;
}

/* 用户看到的打印内容宽度 */
.prinCntent {
  /* width: 50px; */
  text-align: center;
}

@page {
  /* margin: 距离打印纸下边 右边 2mm 真实打印右边; */
  margin: 2mm 0px 4px 2px;
  width: 30mm;
  height: 20mm;
}
</style>
